<template type="text/x-template" id="tpl-sql-history-form">
    <div :id="id" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">SQL 详情</h4>
                </div>
                <div class="modal-body">
                    <dl class="dl-horizontal">
                        <dt>Application Name:</dt>
                        <dd>{{ row['appName'] }}</dd>
                        <dt>Visitor:</dt>
                        <dd>{{ row['visitor'] }}</dd>
                        <dt>Ip:</dt>
                        <dd>{{ row['ip'] }}</dd>
                        <dt>Forwarded Ip:</dt>
                        <dd>{{ row['forwardedIp'] }}</dd>
                        <dt>User Agent:</dt>
                        <dd>{{ row['userAgent'] }}</dd>
                        <dt>Connection:</dt>
                        <dd>{{ row['connection'] }}</dd>
                        <dt>Elapsed:</dt>
                        <dd>{{ row['elapsed'] }}</dd>
                        <dt>Statement:</dt>
                        <dd>{{ row['statement'] }}</dd>
                        <dt>Table Name:</dt>
                        <dd>{{ row['tableName'] }}</dd>
                        <dt>SQL Date:</dt>
                        <dd>{{ row['sqlDate'] }}</dd>
                        <dt>SQL Text:</dt>
                        <dd><code>{{ row['sqlText'] }}</code></dd>
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('sql-history-form', {
        template: document.getElementById('tpl-sql-history-form'),
        props: {
            row: {
                default: function () {
                    return {}
                }
            },
            visible: {
                default: false // 默认不可见
            },
            id: {
                default: function () {
                    return 'm-' + Date.now()
                }
            }
        },
        watch: {
            visible: function (nV, oV) {
                this.show(nV)
            }
        },
        data: function () {
            return {
                jqM: null
            }
        },
        created: function () {
        },
        mounted: function () {
            this.jqM = $(document.getElementById(this.id))
            this.jqM.modal({
                keyboard: true,
                show: this.visible
            })
            let self = this
            this.jqM.on('hide.bs.modal', function (e) {
                self.$emit("toggled", false)
            })
            this.jqM.on('show.bs.modal', function (e) {
                self.$emit("toggled", true)
            })
        },
        methods: {
            show: function (v) {
                this.jqM.modal(v ? 'show' : 'hide')
            }
        }
    })
})
</script>